<template>
    <!-- 工资管理系统 -->
    <div class="wage" v-loading="loading" v-show="!isadd">
        <!-- 工资管理系统头部 -->
        <div class="wage-top">
            <el-button type="danger" @click="() => {
                $router.push({
                    path: '/Salary',
                })
            }">设置</el-button>
            <el-button type="primary" @click="() => {
                $router.push({
                    path: '/statement',
                    query: {
                        id: dataMonthList
                    }
                })
            }">{{ dataMonthList }}报表</el-button>
        </div>
        <!-- 工资管理系统搜索区 -->
        <div class="wage-search">
            <div class="wage-search-item">
                <div>聘用形式:</div>
                <p>
                    <el-checkbox label="正式" size="large" @change="onHnformChange(1)" />
                    <el-checkbox label="非正式" size="large" @change="onHnformChange(2)" />
                </p>
            </div>
            <div class="wage-search-item">
                <div>部门:</div>
                <p>
                    <el-checkbox v-for="item in orgList" :key="item.id" :label="item.name" size="large"
                        @change="handleCheck(item.id)" />
                </p>
            </div>
        </div>
        <!-- 表格 -->
        <div class="wage-table">
            <el-table :data="wageList" style="width: 100%" default-expand-all
      :header-cell-style="{ background: '#f4f6f8', color: '#909399' }">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="username" label="姓名" />
                <el-table-column prop="mobile" label="手机" />
                <el-table-column prop="workNumber" label="工号" />
                <el-table-column prop="formOfEmployment" label="聘用形式">
                    <template #default="{ row }">
                        <span v-if="row.formOfEmployment === 1">正式</span>
                        <span v-else-if="row.formOfEmployment === 2">非正式</span>
                    </template>
                </el-table-column>
                <el-table-column prop="departmentName" label="部门" />
                <el-table-column prop="timeOfEntry" label="入职时间" />
                <el-table-column prop="currentPostWage" label="工资基数" />
                <el-table-column prop="subsidyName" label="津贴方案" />
                <el-table-column label="操作" #default="{ row }" width="200">
                    <el-button type="success" v-if="row.currentPostWage > 0" @click="salary(row)">调薪</el-button>
                    <el-button type="danger" v-else @click="decide(row)">定薪</el-button>
                    <el-button @click="look(row)"> 查看</el-button>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="wage-pagination">
                <el-pagination v-model:current-page="pageSize.page" :background="true" layout="prev, pager, next"
                    :total="total" @current-change="handleCurrentChange" />
            </div>
        </div>

        <!-- 调薪弹框 -->
        <PopUp ref="PopUpRef" title="调薪" width="600" :confirm="rowSalary" :xiao="cancel">
            <template #cont>
                <el-form class="form" ref="formRef" :inline="true" label-position="right" :model="uidWageDeng"
                    label-width="auto" style=" max-width: 600px">
                    <el-form-item label="调整基本工资">
                        <el-input style="width: 150px;" disabled v-model="uidObj.currentPostWage" />
                        <span>-></span>
                    </el-form-item>
                    <el-form-item prop="currentPostWage" :rules="[
                        { required: true, message: '请输入调整后基本工资', trigger: 'blur' }
                    ]">
                        <el-input style="width: 200px;" placeholder="请输入调整后的基本工资"
                            v-model="uidWageDeng.currentPostWage" />
                    </el-form-item>
                    <el-form-item label="调整岗位工资">
                        <el-input style="width: 150px;" disabled v-model="uidObj.currentBasicSalary" />
                        <span>-></span>
                    </el-form-item>
                    <el-form-item prop="currentBasicSalary" :rules="[
                        { required: true, message: '请输入调整后的岗位工资', trigger: 'blur' }
                    ]">
                        <el-input style="width: 200px;" placeholder="请输入调整后的岗位工资"
                            v-model="uidWageDeng.currentBasicSalary" />
                    </el-form-item>
                    <el-form-item label="工资合计">
                        <el-input style="width: 200px;" disabled v-model="uidObj.fixedBasicSalary" />
                        <span style="margin: 0 10px;">-></span>
                        <el-input style="width: 200px;" disabled
                            :value="Number(uidWageDeng.currentBasicSalary) + Number(uidWageDeng.currentPostWage)" />
                    </el-form-item>
                    <el-form-item label="调整幅度">
                        <el-input style="width: 200px;" disabled v-model="uidObj.fixedPostWage" />
                    </el-form-item>
                </el-form>
            </template>
        </PopUp>

        <!-- 定薪 -->
        <PopUp ref="PopUpRef1" title="定薪" :confirm="decideAdd" :xiao="op">
            <template #cont>
                <el-form class="form" ref="formRef1" label-position="right" :model="decideObj" label-width="auto"
                    style=" max-width: 600px">
                    <el-form-item label="当前基本工资" prop="currentBasicSalary" :rules="[
                        { required: true, message: '请输入当前基本工资', trigger: 'blur' }
                    ]">
                        <el-input style="width: 200px;" placeholder="当前基本工资" v-model="decideObj.currentBasicSalary" />
                    </el-form-item>
                    <el-form-item label="当前岗位工资" prop="currentPostWage" :rules="[
                        { required: true, message: '请输入当前岗位工资', trigger: 'blur' }
                    ]">
                        <el-input style="width: 200px;" placeholder="当前岗位工资" v-model="decideObj.currentPostWage" />
                    </el-form-item>
                    <el-form-item label="当前工资合计">
                        <el-input style="width: 200px;" disabled placeholder="当前工资合计"
                            :value="Number(decideObj.currentPostWage) + Number(decideObj.currentBasicSalary)" />
                    </el-form-item>
                    <el-form-item label="转正基本工资" prop="correctionOfBasicWages" :rules="[
                        { required: true, message: '请输入转正基本工资', trigger: 'blur' }
                    ]">
                        <el-input style="width: 200px;" placeholder="转正基本工资"
                            v-model="decideObj.correctionOfBasicWages" />
                    </el-form-item>
                    <el-form-item label="转正岗位工资" prop="turnToPostWages" :rules="[
                        { required: true, message: '请输入转正岗位工资', trigger: 'blur' }
                    ]">
                        <el-input style="width: 200px;" placeholder="转正岗位工资" v-model="decideObj.turnToPostWages" />
                    </el-form-item>
                    <el-form-item label="转正工资合计">
                        <el-input style="width: 200px;" disabled placeholder="转正工资合计"
                            :value="Number(decideObj.turnToPostWages) + Number(decideObj.correctionOfBasicWages)" />
                    </el-form-item>
                </el-form>
            </template>
        </PopUp>
    </div>
    <RouterView v-show="isadd"></RouterView>
</template>


<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import PopUp from '@/components/popUp.vue';
import { getWageList, getOrgList, adjustWage, getWageDetail, setWage, getReport } from "@/api/wageApi/wageList.js"
import { ElMOpen } from "@/utils/fn.js"
import { useRoute } from "vue-router"
import router from '@/router';
let route = useRoute()
console.log(route)

let isadd = ref(false) //三级路由
let loading = ref(false) //loading
let PopUpRef = ref() //弹框调薪dom
let formRef = ref() //表单调薪dom
let formRef1 = ref()//表单定薪dom
let PopUpRef1 = ref() //弹框定薪dom
let wageList = ref([]) // 工资列表
let orgList = ref([]) // 获取组织架构
let dataMonthList = ref("")//获取报表月份
let pageSize = ref({
    page: 1,
    departmentChecks: '', //部门
    approvalsTypeChecks: "", //岗位
})
let rou = () => {
    if (route.fullPath != "/wage") {
        isadd.value = true
    } else {
        isadd.value = false
    }
}
watch(() => route.fullPath, () => {
    rou()
})
rou()
let total = ref(0)
function getWage() {
    loading.value = true
    // 获取工资列表
    getWageList(pageSize.value).then((res) => {
        total.value = res.data.total
        wageList.value = res.data.rows
        loading.value = false
    })
    // 获取组织架构
    getOrgList().then((res) => {
        orgList.value = res.data
        loading.value = false
    })
    // 获取报表
    getReport().then((res) => {
        console.log(res);
        dataMonthList.value = res.data.dataMonth
    })
}

getWage()

let handleCurrentChange = (val: number) => {
    pageSize.value.page = val
    getWage()
};
// 搜索
let jsONN = ref([])
// 部门搜索
let handleCheck = (id) => {
    jsONN.value.indexOf(id) == -1 ? jsONN.value.push(id) : jsONN.value.splice(jsONN.value.indexOf(id), 1)
    pageSize.value.departmentChecks = jsONN.value.join(",")
    getWage()
}
let ChangeId = ref([])
let onHnformChange = (id) => {
    ChangeId.value.indexOf(id) == -1 ? ChangeId.value.push(id) : ChangeId.value.splice(ChangeId.value.indexOf(id), 1)
    pageSize.value.approvalsTypeChecks = ChangeId.value.join(",")
    getWage()
}


// 调薪
let uidObj = ref({})
// 调整工资
let uidWageDeng = ref({
    currentBasicSalary: 0,
    currentPostWage: 0,
    userId: uidObj.value.userId
})
let salary = (obj: any) => {
    getWageDetail(obj.id).then((res) => {
        uidObj.value = res.data
    })
    PopUpRef.value.open()
}
// 确定
let rowSalary = async () => {
    await formRef.value.validate()
    adjustWage(uidObj.value.userId, uidWageDeng.value).then((res) => {
        getWage()
        ElMOpen("调薪成功", "success")
    })
    uidWageDeng.value = {
        currentBasicSalary: "",
        currentPostWage: "",
        userId: ""
    }
    PopUpRef.value.close()
    formRef.value.resetFields()
}
// 取消
let cancel = () => {
    PopUpRef.value.close()
    formRef.value.resetFields()
    uidWageDeng.value = {
        currentBasicSalary: "",
        currentPostWage: "",
        userId: ""
    }
}
// 定薪
let decideUserId = ref("0")
let decideObj = ref({
    currentBasicSalary: "",//当前基本工资
    currentPostWage: "",//当前岗位工资
    correctionOfBasicWages: "",//转正基本工资
    turnToPostWages: "",//转正岗位工资
})
let decide = (obj: any) => {
    decideUserId.value = obj.departmentId
    PopUpRef1.value.open()
}
let decideAdd = async () => {
    JSON.stringify(decideObj.value)
    decideObj.value.userId = decideUserId.value
    await formRef1.value.validate()
    setWage(decideUserId.value, decideObj.value).then(res => {
        console.log(res);
        getWage()
        // ElMOpen("定薪成功", "success")
    }).catch(err => {
        ElMOpen(err.response.data.message, "error")
        getWage()
    })
    decideObj.value = {
        currentBasicSalary: "",//当前基本工资
        currentPostWage: "",//当前岗位工资
        correctionOfBasicWages: "",//转正基本工资
        turnToPostWages: "",//转正岗位工资
    }
    PopUpRef1.value.close()
}

let op = () => {
    PopUpRef1.value.close()
    formRef1.value.resetFields()
    decideObj.value = {
        currentBasicSalary: "",//当前基本工资
        currentPostWage: "",//当前岗位工资
        correctionOfBasicWages: "",//转正基本工资
        turnToPostWages: "",//转正岗位工资
    }
}

// 跳转详情
let look = (row)=>{
    router.push({
        path:"/particulars",
        query:{
            id:row.id
        }
    })
}



</script>

<style scoped lang="scss">
body {
    margin: 0;
}

.example-showcase .el-loading-mask {
    z-index: 9;
}

.wage-top {
    background-color: #fff;
    height: 63px;
    line-height: 60px;
    padding: 0 20px;
}

.wage-search {
    margin-top: 10px;
    padding: 20px;
    background-color: #fff;
    height: 180px;
    font-size: 12px;

    .wage-search-item {
        display: flex;
        align-items: center;
        div {
            width: 100px;
            font-weight: 700;
            margin-top: 10px;
        }

        p {
            height: 30px;
        }

    }
}

// 表格
.wage-table {
    margin-top: 10px;
    padding: 20px;
    background-color: #fff;
    font-size: 12px;
}

// 分页
.wage-pagination {
    margin-top: 10px;
    padding: 20px;
    background-color: #fff;
    height: 80px;
    font-size: 12px;
}

.wage-pagination {
    display: flex;
    justify-content: space-around;
}

.form {
    input {
        height: 40px;
        line-height: 40px;
    }
}
</style>